<template>
    <a-layout-header>
        <a-row type="flex">
            <a-col :span="3">
                <template v-if="windowWidth >= 1260">
                    <img src="../assets/logo.png" alt="Logo"
                        style="height: 50px; line-height: 64px ;overflow: hidden;margin:10px">
                    <img src="../assets/logo-l.png" alt="Logo"
                        style="height: 30px; line-height: 64px ;overflow: hidden;">
                </template>
                <template v-else-if="windowWidth >= 720">
                    <img src="../assets/logo-text.png" alt="Logo"
                        style="height: 25px; line-height: 64px ;overflow: hidden;margin:20px 0 0 10px;">
                </template>
                <template v-else>
                    <img src="../assets/logo.png" alt="Logo" width="35px" height="35px"
                        style="height: 35px; line-height: 45px ;overflow: hidden;margin:8px 0 0 7px;">
                </template>
            </a-col>
            <a-col :span="17" align="center" v-if="windowWidth >= 720" style="z-index: 2">
                <a-menu theme="light" mode="horizontal" v-model:selectedKeys="selectedKeys"
                    :style="{ lineHeight: '64px' }">
                    <a-menu-item key="1" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/home'>
                            <HomeTwoTone style="font-size: 20px; margin: 0 7px;" />首页
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="2" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/chat'>
                            <BulbTwoTone style="font-size: 20px; margin: 0 7px;" />交流圈
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="3" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/diy'>
                            <HighlightTwoTone style="font-size: 20px; margin: 0 7px;" />定制阁
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="4" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/buy'>
                            <ShoppingTwoTone style="font-size: 20px; margin: 0 7px;" />买卖铺
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="5" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/order'>
                            <AccountBookTwoTone style="font-size: 20px; margin: 0 7px;" />订单坊
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="6" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/service'>
                            <SmileTwoTone style="font-size: 20px; margin: 0 7px;" />服务府
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="7" style="font-size: 20px; margin: 0 12px;">
                        <router-link to='/space'>
                            <CrownTwoTone style="font-size: 20px; margin: 0 7px;" />个人中心
                        </router-link>
                    </a-menu-item>
                </a-menu>
            </a-col>
            <a-col :span="17" align="center" v-else style="z-index: 2">
                <a-menu theme="light" mode="horizontal" v-model:selectedKeys="selectedKeys"
                    :style="{ lineHeight: '45px' }">
                    <a-menu-item key="1" style="font-size: 10px; margin: 0">
                        <router-link to='/home'>
                            <HomeTwoTone style="font-size: 10px; margin: 0;" />首页
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="2" style="font-size: 10px; margin: 0">
                        <router-link to='/chat'>
                            <BulbTwoTone style="font-size: 10px; margin: 0" />交流圈
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="3" style="font-size: 10px; margin: 0">
                        <router-link to='/diy'>
                            <HighlightTwoTone style="font-size: 10px; margin: 0" />定制阁
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="4" style="font-size: 10px; margin: 0">
                        <router-link to='/buy'>
                            <ShoppingTwoTone style="font-size: 10px; margin: 0" />买卖铺
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="5" style="font-size: 10px; margin: 0">
                        <router-link to='/order'>
                            <AccountBookTwoTone style="font-size: 10px; margin: 0" />订单坊
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="6" style="font-size: 10px; margin: 0">
                        <router-link to='/service'>
                            <SmileTwoTone style="font-size: 10px; margin: 0" />服务府
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="7" style="font-size: 10px; margin: 0">
                        <router-link to='/space'>
                            <CrownTwoTone style="font-size: 10px; margin: 0" />个人中心
                        </router-link>
                    </a-menu-item>
                </a-menu>
            </a-col>
            <a-col :span="4" v-if="windowWidth >= 1280" style="z-index: 1">
                <a-menu theme="light" mode="horizontal" :style="{ lineHeight: '64px', float: 'right' }">
                    <a-menu-item v-if="!isAuthenticated" key="6">
                        <router-link to='/login'>登录/注册</router-link>
                    </a-menu-item>
                    <a-menu-item v-if="isAuthenticated && windowWidth >= 1400" key="7" :style=usernameStyle
                        :disabled="true">
                        <span>{{ username }}</span>
                    </a-menu-item>
                    <a-menu-item v-if="isAuthenticated" key="8" @click="logout">
                        退出登录
                    </a-menu-item>
                </a-menu>
            </a-col>
            <a-col :span="4" v-else style="z-index: 1">
                <a-menu theme="light" mode="horizontal" :style="{ lineHeight: '45px', float: 'right' }">
                    <a-menu-item v-if="!isAuthenticated" key="6" style="font-size: 10px;">
                        <router-link to='/login'>登录/注册</router-link>
                    </a-menu-item>
                    <a-menu-item v-if="isAuthenticated" key="8" @click="logout" style="font-size: 10px;">
                        退出登录
                    </a-menu-item>
                </a-menu>
            </a-col>
        </a-row>
    </a-layout-header>
    <router-view></router-view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { HomeTwoTone, BulbTwoTone, HighlightTwoTone, ShoppingTwoTone, AccountBookTwoTone, CrownTwoTone, SmileTwoTone } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

const isAuthenticated = ref(false);
const router = useRouter();
const username = localStorage.getItem('username');
const token = localStorage.getItem('token');
const selectedKeys = ref(['1']); // 默认选中第一个菜单项

// 监听路由变化来更新菜单的选中状态
watch(router.currentRoute, (newRoute) => {
    // 根据路由路径更新选中状态
    switch (newRoute.path) {
        case '/home':
            selectedKeys.value = ['1'];
            break;
        case '/chat':
            selectedKeys.value = ['2'];
            break;
        case '/diy':
            selectedKeys.value = ['3'];
            break;
        case '/market':
            selectedKeys.value = ['4'];
            break;
        case '/order':
            selectedKeys.value = ['5'];
            break;
        case '/service':
            selectedKeys.value = ['6'];
            break;
        case '/space':
            selectedKeys.value = ['7'];
            break;
        default:
            selectedKeys.value = [''];
            break;
    }
}, {
    immediate: true // 初始时立即执行一次
});

const usernameStyle = ref({
    width: '100px', // 根据实际需要调整宽度
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
    cursor: 'pointer',
    align: 'left',
    textAlign: 'right'
});

const windowWidth = ref(window.innerWidth);

onMounted(() => {
    // 检查本地存储中是否存储了username和token
    isAuthenticated.value = !!username && !!token;
    window.addEventListener('resize', () => {
        windowWidth.value = window.innerWidth;
    });
});

const logout = () => {
    // 清除本地存储中的用户信息
    localStorage.removeItem('username');
    localStorage.removeItem('token');
    isAuthenticated.value = false;
    // 跳转到首页
    //router.push('/home');
    window.location.href = '/home';
};
</script>

<style scoped></style>
